<template>
  <view class="bazipaipan-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <tui-tab
      :current="current"
      :tabs="tabs"
      :size="30"
      bold
      color="#999"
      selectedColor="#c09351"
      sliderBgColor="#c09351"
      @change="changeTab"
    ></tui-tab>
    <view class="bazipaipan-content-wrapper" v-if="data.detailInfo">
      <view v-if="current == 2" class="paipan-wrapper">
        <tui-card :title="shenShaTitle">
          <template v-slot:body>
            <view class="pan-list-2">
              <tui-table>
                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label">#</view>
                  </tui-td>
                  <tui-td
                    bold
                    color="#0000FF"
                    v-for="(item,index) in  data.dayunInfo.bigGod"
                    :key="index"
                  >
                    <view class="dypp-label">{{item}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold width="30">
                    <view class="dypp-label">大运</view>
                  </tui-td>
                  <tui-td
                    bold
                    color="#f30"
                    v-for="(item,index) in  data.dayunInfo.big"
                    :key="index"
                  >
                    <view class="dypp-label">{{item}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold width="30">
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.bigCs" :key="index">
                    <view class="dypp-label">{{item}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold width="30">
                    <view class="dypp-label">虚岁</view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.xuSui" :key="index">
                    <view class="dypp-label">{{item}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label">始于</view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.bigStart_year" :key="index">
                    <view class="dypp-label">{{item}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo0" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo1" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo2" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo3" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo4" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo5" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo6" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo7" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo8" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label"></view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.yearsInfo9" :key="index">
                    <view class="dypp-label">{{item.yearChar}}</view>
                  </tui-td>
                </tui-tr>

                <tui-tr>
                  <tui-td bold>
                    <view class="dypp-label">止于</view>
                  </tui-td>
                  <tui-td v-for="(item,index) in  data.dayunInfo.bigEndYear" :key="index">
                    <view class="dypp-label">{{item}}</view>
                  </tui-td>
                </tui-tr>
              </tui-table>
            </view>
          </template>
        </tui-card>
      </view>

      <view v-if="current == 0" class="paipan-wrapper">
        <tui-card :title="shenShaTitle">
          <template v-slot:body>
            <view class="pan-row-wrappwe">
              <tui-row>
                <tui-col style="padding:2px 0" :span="24">缘主姓名：{{data.baseInfo.name}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">出生公历：{{data.baseInfo.gongli}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">出生农历：{{data.baseInfo.nongli}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">起运周岁：{{data.baseInfo.qiyun}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">交运日期：{{data.baseInfo.jiaoyun}}</tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">#</view>
                </tui-col>
                <tui-col :span="5">年柱</tui-col>
                <tui-col :span="5">月柱</tui-col>
                <tui-col :span="5">日柱</tui-col>
                <tui-col :span="5">时柱</tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title pan-zhuxing">主星</view>
                </tui-col>
                <tui-col :span="5">
                  <view class="pan-zhuxing">{{data.detailInfo.zhuxing.year}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class="pan-zhuxing">{{data.detailInfo.zhuxing.month}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class="pan-zhuxing">{{data.detailInfo.zhuxing.day}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class="pan-zhuxing">{{data.detailInfo.zhuxing.hour}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">
                    <tui-tag type="danger" padding="8rpx" size="24rpx">乾造</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view>
                    <tui-tag
                      type="danger"
                      padding="8rpx"
                      size="24rpx"
                    >{{data.detailInfo.sizhu.year.tg}}{{data.detailInfo.sizhu.year.dz}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag
                      type="danger"
                      padding="8rpx"
                      size="24rpx"
                    >{{data.detailInfo.sizhu.month.tg}}{{data.detailInfo.sizhu.month.dz}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag
                      type="danger"
                      padding="8rpx"
                      size="24rpx"
                    >{{data.detailInfo.sizhu.day.tg}}{{data.detailInfo.sizhu.day.dz}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag
                      type="danger"
                      padding="8rpx"
                      size="24rpx"
                    >{{data.detailInfo.sizhu.hour.tg}}{{data.detailInfo.sizhu.hour.dz}}</tui-tag>
                  </view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">藏干</view>
                </tui-col>
                <tui-col :span="5">
                  <view
                    class
                  >{{data.detailInfo.canggan.year && data.detailInfo.canggan.year.join("|")}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view
                    class
                  >{{data.detailInfo.canggan.month && data.detailInfo.canggan.month.join("|")}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view
                    class
                  >{{data.detailInfo.canggan.day && data.detailInfo.canggan.day.join("|")}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view
                    class
                  >{{data.detailInfo.canggan.hour && data.detailInfo.canggan.hour.join("|")}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">副星</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <view
                      class
                      v-for="(item,index) in data.detailInfo.fuxing.year && data.detailInfo.fuxing.year"
                      :key="index"
                    >{{item}}</view>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <view
                      class
                      v-for="(item,index) in data.detailInfo.fuxing.month && data.detailInfo.fuxing.month"
                      :key="index"
                    >{{item}}</view>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <view
                      class
                      v-for="(item,index) in data.detailInfo.fuxing.day && data.detailInfo.fuxing.day"
                      :key="index"
                    >{{item}}</view>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <view
                      class
                      v-for="(item,index) in data.detailInfo.fuxing.hour && data.detailInfo.fuxing.hour"
                      :key="index"
                    >{{item}}</view>
                  </view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">星运</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.xingyun.year}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.xingyun.month}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.xingyun.day}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.xingyun.hour}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">自坐</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.zizuo.year}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.zizuo.month}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.zizuo.day}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.zizuo.hour}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">空亡</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.kongwang.year}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.kongwang.month}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.kongwang.day}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.detailInfo.kongwang.hour}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">
                    <tui-tag type="green" padding="8rpx" size="24rpx">纳音</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.detailInfo.nayin.year}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag
                      type="green"
                      padding="8rpx"
                      size="24rpx"
                    >{{data.detailInfo.nayin.month}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.detailInfo.nayin.day}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.detailInfo.nayin.hour}}</tui-tag>
                  </view>
                </tui-col>
              </tui-row>
            </view>
          </template>
        </tui-card>
      </view>

      <view v-if="current == 1" class="paipan-wrapper">
        <tui-card :title="shenShaTitle">
          <template v-slot:body>
            <view class="paipan-list">
              <view class="paipan-item">
                <view class="label">年柱</view>
                <view class="value">{{ data.detailInfo.shensha.year }}</view>
              </view>

              <view class="paipan-item">
                <view class="label">月柱</view>
                <view class="value">{{ data.detailInfo.shensha.month }}</view>
              </view>

              <view class="paipan-item">
                <view class="label">日柱</view>
                <view class="value">{{ data.detailInfo.shensha.day }}</view>
              </view>

              <view class="paipan-item">
                <view class="label">时柱</view>
                <view class="value">{{ data.detailInfo.shensha.hour }}</view>
              </view>
            </view>
          </template>
        </tui-card>
      </view>

      <view v-if="current == 3" class="paipan-wrapper">
        <tui-card :title="shenShaTitle">
          <template v-slot:body>
            <view class="paipan-list">
              <view
                class="paipan-item"
                v-for="(item, index) in data.detailInfo.dayunshensha"
                :key="index"
              >
                <view class="label">{{ item.tgdz }} :</view>
                <view class="value">{{ item.shensha }}</view>
              </view>
            </view>
          </template>
        </tui-card>
      </view>
    </view>
  </view>
</template>

<script>
import { yfgpaipanApi } from "@/apis/qiuqian.js";
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],
  
  data() {
    return {
      current: 0,
      tabs: [
        {
          name: "八字排盘",
          id: 0
        },
        {
          name: "四柱神煞",
          id: 1
        },
        {
          name: "大运排盘",
          id: 2
        },
        {
          name: "大运神煞",
          id: 3
        }
      ],
      shenShaTitle: {
        text: "八字排盘",
        color: "#c09351",
        size: 28
      },
      data: {}
    };
  },
  onLoad(option) {
    let baseFormData = JSON.parse(option.baseFormData); // 字符串转对象
    this.getDataInfo(baseFormData);
  },
  methods: {
    async getDataInfo(baseFormData) {
      let { code, data } = await yfgpaipanApi(baseFormData);
      if (code == 1) {
        this.data = data;
      }
    },

    changeTab(e) {
      this.current = e.index;
      this.shenShaTitle.text = e.item.name;
    }
  }
};
</script>



<style lang="scss">
.bazipaipan-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;
  font-size: 10px;
  overflow: hidden;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .bazipaipan-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .paipan-wrapper {
    margin-top: 16px;
    .paipan-list {
      padding: 10px 6px;
      .paipan-item {
        display: flex;
        padding: 4px 0;
        .label {
          font-size: 16px;
          font-weight: 500;
          margin-right: 8px;
        }
      }
    }

    .pan-list-2 {
      overflow-x: auto;
      overflow-y: auto;
      margin-bottom: 20px;
      .dypp-label {
        width: 40px;
      }
    }

    .pan-row-wrappwe {
      padding: 10px 6px;
      font-size: 13px;
      .tui-row__box {
        padding: 6px 0;
        .pan-title {
          font-weight: 500;
        }
        .pan-zhuxing {
          font-size: 15px;
          color: #f30;
        }
      }
    }
  }
}
</style>